<!--健康档案管理=>BMI设置维护 -->
<template>
  <div class="bmi pad">
    <div class="head">
      <span>BMI设置维护</span>
    </div>
    <el-tabs class="m-t-b" type="border-card">
      <el-tab-pane label="BMI">
        <div>
          <el-button @click="showBmi" type="primary"><i class="el-icon-plus"></i> 添加BMI</el-button>
          <el-button disabled type="primary"><i class="el-icon-upload"></i> 批量上传</el-button>
        </div>
        <el-table class="m-t-b" border stripe :data="bmis" v-loading="bmiLoading">
          <el-table-column label="性别">
            <template slot-scope="scope">
              {{scope.row.gender === 1 ? '男' : '女'}}
            </template>
          </el-table-column>
          <el-table-column label="年龄" prop="age">
            <template slot-scope="scope">
              {{scope.row.age + '岁'}}
            </template>
          </el-table-column>
          <el-table-column label="BMI(kg/㎡)" prop="bmi"></el-table-column>
          <el-table-column label="结果" prop="result"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="default" circle icon="el-icon-edit" @click="updateBmi(scope.row)"></el-button>
              <el-button type="danger" circle icon="el-icon-delete" @click="deleteBmi(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="flex m-t-b"
          :page-size="pageSize"
          layout="prev, pager, next"
          @current-change="handleBmiPagi"
          :total="bmiTotal">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="身高">
        <div>
          <el-button type="primary" @click="showHeight"><i class="el-icon-plus"></i> 添加身高</el-button>
          <el-button disabled type="primary"><i class="el-icon-upload"></i> 批量上传</el-button>
        </div>
        <el-table class="m-t-b" border stripe :data="heights" v-loading="heightLoading">
          <el-table-column label="性别">
            <template slot-scope="scope">
              {{scope.row.gender === 1 ? '男' : '女'}}
            </template>
          </el-table-column>
          <el-table-column label="年龄" prop="age">
            <template slot-scope="scope">
              {{scope.row.age + '岁'}}
            </template>
          </el-table-column>
          <el-table-column label="身高(cm)" prop="height">
            <template slot-scope="scope">
              {{scope.row.height + 'cm'}}
            </template>
          </el-table-column>
          <el-table-column label="结果" prop="result"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="default" circle icon="el-icon-edit" @click="updateHeight(scope.row)"></el-button>
              <el-button type="danger" circle icon="el-icon-delete" @click="deleteHeight(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="flex m-t-b"
          :page-size="pageSize"
          layout="prev, pager, next"
          @current-change="handleGenderPagi"
          :total="total">
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :title="bmidDialogTitle" :visible.sync="showBmiDialog">
      <el-form label-position="top" :model="bmi" ref="bmi" :rules="rules">
        <el-form-item label="性别">
          <el-radio v-model="bmi.gender" :label="1" border>男</el-radio>
          <el-radio v-model="bmi.gender" :label="2" border>女</el-radio>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input type="number" v-model="bmi.age">
            <span slot="append">岁</span>
            <!-- <el-select style="width: 100px" slot="append" v-model="bmiAgeType">
              <el-option :value="0" label="周"></el-option>
              <el-option :value="1" label="月"></el-option>
              <el-option :value="2" label="岁"></el-option>
            </el-select> -->
          </el-input>
        </el-form-item>
        <el-form-item label="BMI" prop="bmi">
          <el-input v-model="bmi.bmi">
            <el-select style="width: 100px;" slot="prepend" v-model="bmiType">
              <el-option v-for="(item, i) in areaTypes" :key="i" :value="i" :label="item"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="结果" prop="result">
          <el-select v-model="bmi.result">
            <el-option v-for="(item, i) in results" :key="i" :label="item.result" :value="item.resultId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideBmiDialog">取 消</el-button>
        <el-button type="primary" @click="submitBmi('bmi')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 身高 -->
    <el-dialog :title="heightDialogTitle" :visible.sync="showHeightDialog">
      <el-form label-position="top" :model="height" ref="height" :rules="rules">
        <el-form-item label="性别">
          <el-radio v-model="height.gender" :label="1" border>男</el-radio>
          <el-radio v-model="height.gender" :label="2" border>女</el-radio>
        </el-form-item>
        <el-form-item type="number" label="年龄" prop="age">
          <el-input type="number" v-model="height.age">
            <span slot="append">岁</span>
            <!-- <el-select style="width: 100px" slot="append" v-model="heightAgeType">
              <el-option :value="0" label="周"></el-option>
              <el-option :value="1" label="月"></el-option>
              <el-option :value="2" label="岁"></el-option>
            </el-select> -->
          </el-input>
        </el-form-item>
        <el-form-item label="身高(单位: 米)" prop="height">
          <el-input type="number" v-model="height.height">
            <!-- <el-select style="width: 100px;" slot="prepend" v-model="heightType">
              <el-option v-for="(item, i) in areaTypes" :key="i" :value="i" :label="item"></el-option>
            </el-select> -->
            <span slot="append">米</span>
          </el-input>
        </el-form-item>
        <el-form-item label="结果" prop="result">
          <el-select v-model="height.result">
            <el-option v-for="(item, i) in results" :key="i" :label="item.result" :value="item.resultId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideHeightDialog">取 消</el-button>
        <el-button type="primary" @click="submitHeight('height')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getAllResultList,
  getBmiOrHeightList,
  addBmiOrHeight,
  deleteBmiOrHeight,
  updateBmiOrHeight
} from '../api';

export default {
  name: 'bmi',
  data () {
    return {
      pageSize: 10,
      bmiTotal: 0,
      total: 0,
      bmidDialogTitle: '添加BMI',
      heightDialogTitle: '添加身高',
      showBmiDialog: false,
      showHeightDialog: false,
      bmiLoading: true,
      heightLoading: true,
      results: [],
      bmiAgeType: 0,
      heightAgeType: 0,
      bmiType: 0,
      heightType: 0,
      ageTypes: [
        '周',
        '月',
        '岁'
      ],
      areaTypes: [
        '<',
        '>'
      ],
      bmis: [],
      heights: [],
      bmi: {
        gender: 1,
        age: '',
        bmi: '',
        result: ''
      },
      height: {
        gender: 1,
        age: '',
        height: '',
        result: ''
      },
      rules: {
        age: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ],
        bmi: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ],
        height: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ],
        result: [
          { required: true, message: '该项不能为空', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    handleBmiPagi (page) {
      this.fetchBmiOrHeight(page, 1)
    },
    handleGenderPagi (page) {
      this.fetchBmiOrHeight(page, 2)
    },
    updateBmi (data) { // 更新bmi
      if (!this.$checkAuth('canEditBMI')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.bmidDialogTitle = '修改BMI';
      this.bmi.bmiId = data.bmiId;
      this.bmi.type = data.type;
      this.bmi.age = data.age;
      this.bmi.gender = data.gender;
      this.bmi.result = data.resultId;
      let unit = data.bmi[0];
      for (let i = 0; i < this.areaTypes.length; i ++) {
        if (this.areaTypes[i] === unit) {
          this.bmiType = i;
          break
        }
      };
      this.bmi.bmi = Number(data.bmi.slice(1));
      this.showBmiDialog = true
    },
    deleteBmi (data) { // 删除bmi
      if (!this.$checkAuth('canDeleteBMI')) {
        return this.$message.error('暂无对应操作权限!')
      };
      const that = this;
      this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.handleDelete(data.bmiId, 1)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    updateHeight (data) { // 更新身高
      if (!this.$checkAuth('canEditHeight')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.height.bmiId = data.bmiId;
      this.height.gender = data.gender;
      this.height.height = data.height;
      this.height.result = data.resultId;
      this.height.age = data.age;
      this.heightDialogTitle = '修改身高';
      this.showHeightDialog = true
    },
    deleteHeight (data) { // 删除身高
      if (!this.$checkAuth('canDeleteHeight')) {
        return this.$message.error('暂无对应操作权限!')
      };
      const that = this;
      this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.handleDelete(data.bmiId, 2)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleDelete (id, type) {
      deleteBmiOrHeight(id)
      .then(res => {
        if (res.data.code === 1) {
          this.$message({
            type: 'success',
            message: '操作成功！'
          });
          this.fetchBmiOrHeight(1, type)
        } else {
          this.$message.error(res.data.msg || '网络异常！')
        }
      })
      .catch(e => {
        this.$message.error('网络异常！')
      })
    },
    openTip (callback) { // 打开提示框
      this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        callback && callback()
      }).catch(() => {
        console.log(arguments)
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    fetchResult () {
      getAllResultList()
      .then(res => {
        if (res.data.code === 1) {
          this.results = res.data.data || []
        } else {
          this.$message.error(res.data.msg || '网络异常!')
        }
      })
      .catch(e => {
        this.$message.error('网络异常!')
      })
    },
    hideBmiDialog () {
      this.showBmiDialog = false
    },
    showBmi () {
      if (!this.$checkAuth('canAddBMI')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.bmidDialogTitle = '添加BMI';
      this.bmi.gender = 1;
      this.bmi.age = '';
      this.bmi.bmi = '';
      this.bmi.result = '';
      this.bmiType = 0;
      this.showBmiDialog = true
    },
    showHeight () {
      if (!this.$checkAuth('canAddHeight')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.height.age = '';
      this.height.height = '';
      this.height.result = '';
      this.height.gender = 1;
      this.heightDialogTitle = '添加身高'
      this.showHeightDialog = true
    },
    hideHeightDialog () {
      this.showHeightDialog = false
    },
    submitBmi (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.bmidDialogTitle === '添加BMI') {
            addBmiOrHeight({
              type: 1, //  //类型(1根据bmi计算2根据身高计算)  (Integer)
              gender: this.bmi.gender, //  //性别(1男2女)  (Integer)
              age: this.bmi.age, //  //年龄(默认单位岁)(Integer)
              bmi: this.areaTypes[this.bmiType] + this.bmi.bmi, //  //bmi(前面带大于号小于号)(String)
              height: null, //  //身高  (Double)
              resultId: this.bmi.result //  //结果id
            })
            .then(res => {
              if (res.data.code === 1) {
                this.$message({
                  type: 'success',
                  message: '操作成功！'
                });
                this.showBmiDialog = false;
                this.fetchBmiOrHeight(1, 1)
              } else {
                this.$message.error(res.data.msg || '网络异常！')
              }
            })
            .catch(e => {
              this.$message.error('网络异常！')
            })
          } else {
            updateBmiOrHeight({
              bmiId: this.bmi.bmiId,  // id
              type: 1, //  //类型(1根据bmi计算2根据身高计算)  (Integer)
              gender: this.bmi.gender, //  //性别(1男2女)  (Integer)
              age: this.bmi.age, //  //年龄(默认单位岁)(Integer)
              bmi: this.areaTypes[this.bmiType] + this.bmi.bmi, //  //bmi(前面带大于号小于号)(String)
              height: null, //  //身高  (Double)
              resultId: this.bmi.result //  //结果id
            })
            .then(res => {
              if (res.data.code === 1) {
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                });
                this.showBmiDialog = false;
                this.fetchBmiOrHeight(1, 1)
              } else {
                this.$message.error(res.data.msg || '网络异常!')
              }
            })
            .catch(e => {
              this.$message.error('网络异常!')
            })
          }
        } else {
          return false
        }
      })
    },
    submitHeight (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.heightDialogTitle === '添加身高') {
            addBmiOrHeight({
              type: 2, //  //类型(1根据bmi计算2根据身高计算)  (Integer)
              gender: this.height.gender, //  //性别(1男2女)  (Integer)
              age: Number(this.height.age), //  //年龄(默认单位岁)(Integer)
              bmi: null, //  //bmi(前面带大于号小于号)(String)
              height: Number(this.height.height), //  //身高  (Double)
              resultId: this.height.result //  //结果id
            })
            .then(res => {
              if (res.data.code === 1) {
                this.$message({
                  type: 'success',
                  message: '操作成功！'
                });
                this.showHeightDialog = false;
                this.fetchBmiOrHeight(1, 2)
              } else {
                this.$message.error(res.data.msg || '网络异常！')
              }
            })
            .catch(e => {
              this.$message.error('网络异常！')
            })
          } else {
            updateBmiOrHeight({
              bmiId: this.height.bmiId,  // id
              type: 2, //  //类型(1根据bmi计算2根据身高计算)  (Integer)
              gender: this.height.gender, //  //性别(1男2女)  (Integer)
              age: Number(this.height.age), //  //年龄(默认单位岁)(Integer)
              bmi: null, //  //bmi(前面带大于号小于号)(String)
              height: Number(this.height.height), //  //身高  (Double)
              resultId: this.height.result //  //结果id
            })
            .then(res => {
              if (res.data.code === 1) {
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                });
                this.showHeightDialog = false;
                this.fetchBmiOrHeight(1, 2)
              } else {
                this.$message.error(res.data.msg || '网络异常!')
              }
            })
            .catch(e => {
              this.$message.error('网络异常!')
            })
          }
        } else {
          return false
        }
      })
    },
    fetchBmiOrHeight (index, type, gender, age, bmi, height) { // 请求bmi/身高判定列表
      if (type === 1) {
        this.bmiLoading = true
      } else {
        this.heightLoading = true
      };
      gender = gender || null;
      age = age || null;
      bmi = bmi || null;
      height = height || null;
      getBmiOrHeightList({
        index: index,
        count: this.pageSize,
        queryParam: {
            type: type, //类型(1bmi,2身高)
            gender: gender, //性别
            age: age, //年龄
            bmi: bmi, //bmi
            height: height //身高
        }
      })
      .then(res => {
        if (res.data.code === 1) {
          if (type === 1) {
            this.bmiTotal = res.data.data.totalRecord ||0;
            this.bmis = res.data.data.list
          } else {
            this.total = res.data.data.totalRecord ||0;
            this.heights = res.data.data.list
          }
        } else {
          this.$message.error(res.data.msg || '网络异常！')
        };
        if (type === 1) {
          this.bmiLoading = false
        } else {
          this.heightLoading = false
        };
      })
      .catch(e => {
        if (type === 1) {
          this.bmiLoading = false
        } else {
          this.heightLoading = false
        };
        this.$message.error('网络异常！')
      })
    }
  },
  created () {
    this.fetchResult();
    this.fetchBmiOrHeight(1, 1);
    this.fetchBmiOrHeight(1, 2)
  }
}
</script>
<style lang="scss">
  .bmi {
    .cell {
      text-align: center;
    }
  }
</style>
